<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- <link rel="stylesheet" href="artDialog/skins/default.css"
	type="text/css"></link> -->

<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/highcharts-3d.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">系统管理</a></li>
    <li><a href="#">用户组设置</a></li>
    <li><a href="#">统计</a></li>
    </ul>
    </div>
    
    
    <span style="padding-left: 50px; padding-top: 20px;">
    	<a href="group.html" style="font-size: 16px;">
    		返回 >
    	</a>
    
    </span>

<div id="container" style="height: 400px"></div>

<script>
	
    var chart;
    $(document).ready(function(){
        chart = new Highcharts.Chart({
            //常规图表选项设置
            chart: {
                renderTo: 'container',        //在哪个区域呈现，对应HTML中的一个元素ID
                plotBackgroundColor: null,    //绘图区的背景颜色
                plotBorderWidth: null,        //绘图区边框宽度
                plotShadow: false            //绘图区是否显示阴影            
            },
            //图表的主标题
            title: {
                text: '用户组所占比例'
            },
            //当鼠标经过时的提示设置
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>',
                percentageDecimals: 1
            },
          //每种图表类型属性设置
            plotOptions: {
                //饼状图
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            //Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
                            return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
                        }
                    }
                }
            },
            //图表要展现的数据
            series: [{
                type: 'pie'
                //name: '机器占比'
            }]
        });
    });
    $.ajax({
        type : "GET",
        url : "group!testHighcharts.action",
        success : function(data){
        var jsonObj = eval("("+data+")");
       			browsers = [];
          //迭代，把异步获取的数据放到数组中
                        $.each(jsonObj,function(i,d){
                            browsers.push([d.gname,d.gcount]);
                        });
            //设置数据
            chart.series[0].setData(browsers);  
        },
        error : function(e){
            alert(e);
        }
    });

    </script>


	</body>
</html>
